<template>
  <div v-loading="commentsLoading" class="comments">
    <div v-if="msgBaseList && msgBaseList.length > 0" class="comList">
      <p class="time" style="margin: 0;">
        <span>{{ msgBaseList[0].title }}</span>
      </p>
      <div v-for="(v) in msgBaseList" :key="v.id" :class="v.createBy && v.createBy.nickName === $store.getters.name ? 'box right-box' : 'box left-box'">
        <el-image v-if="v.avatar" class="img-box" :src="v.avatar" fit="fill" />
        <span v-else class="img-box noUser" />
        <div class="content">
          <p class="time">
            <span>{{ parseTime(v.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </p>
          <h4 v-if="v.createBy && v.createBy.nickName">{{ v.createBy.nickName }}</h4>
          <h4 v-else>{{ $t('系统通知') }}</h4>
          <h3 v-if="v.content" class="msgComment dealTrack">
            <quillEditor v-model="v.content" disabled placeholder="" />
          </h3>
        </div>
      </div>
    </div>
    <div style="margin: 10px;">
      <comment-editor ref="commentEditorRef" @submit="submitContext" @elIconRefresh="elIconRefresh" />
    </div>
  </div>
</template>

<script>
import commentEditor from '@/components/CommentEditor'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { sendReMsg } from '@/api/system/message/msgBase'
import { getDealTrack } from '@/api/deal/track/dealTrack'

export default {
  components: {
    commentEditor,
    quillEditor
  },
  props: {
    formData: {
      type: Object,
      default: () => {},
      requires: true
    }
  },
  data() {
    return {
      // 遮盖层
      loading: false,
      commentsLoading: false,
      currentUser: this.$store.state.user.userId,
      msgBaseList: []
    }
  },
  computed: {},
  watch: {
    formData: {
      handler(val) {
        if (val) {
          this.init(val)
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
  },
  methods: {
    init(data) {
      this.msgBaseList = data.msgBaseList
    },
    // 刷新评论
    elIconRefresh() {
      this.commentsLoading = true
      getDealTrack(this.formData.id).then(response => {
        this.commentsLoading = false
        var tempForm = response.data
        if (tempForm != null && tempForm.msgBaseList != null) {
          this.msgBaseList = tempForm.msgBaseList
        }
      })
    },
    // 发布评论
    submitContext(text) {
      this.$nextTick(() => {
        this.$refs.commentEditorRef.emptyCommentContent()
      })
      const data = {
        title: this.formData.msgBaseList[0].title,
        content: text,
        primaryId: this.formData.msgBaseList[0].id,
        noticeCode: 'createTrack',
        type: 'createTrack',
        dataId: this.formData.id,
        component: '@/views/deal/track/dealTrackForm',
        openComponent: 'N',
        userIds: this.getMsgUserId()
      }
      console.log(this.formData, data, '1111111111111')
      this.commentsLoading = true
      sendReMsg(data).then(() => {
        this.elIconRefresh()
      }).catch(() => {
        this.commentsLoading = false
      })
    },
    // 获取当前评论中所有的用户ID
    getMsgUserId() {
      var userIdArr = [this.currentUser]
      this.msgBaseList.forEach(item => {
        if (item && item.createBy && item.createBy.id) {
          userIdArr.push(item.createBy.id)
        }
      })
      return userIdArr
    },
    formatTime(val) {
      if (val) {
        return val.substring(2, 16)
      }
      return val
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.ul_style{
  padding-left: 20px;
  li{
    list-style: disc;
    line-height: 20px;
  }
}
/deep/ol li{
  list-style: decimal inside !important;
}
/deep/.dealTrack{
  background: #9eea6a;
  padding: 7px 10px;
  .quill-editor{
    margin-top: 5px;
  }
  .editor {
    line-height: normal !important;
  }
  .ql-toolbar{
    display: none;
  }
  .ql-editor{
    padding: 0;
  }
  .ql-container.ql-snow{
    border: 0;
  }
}
.left-box .dealTrack {
  background: white;
}
</style>
